import {DrawerContentScrollView, DrawerItem} from '@react-navigation/drawer';
import {DrawerActions, NavigationProp} from '@react-navigation/native';
import RnButton from 'components/RnButton';
import lang from 'lang';
import React, {useEffect, useState} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Button,
  Image,
  TouchableOpacity,
} from 'react-native';
import {useSelector, useDispatch} from 'react-redux';
import actions from 'reduxState/actions';
import {selectChannel, selectChannels} from 'reduxState/selectors';
import {Channel, ResponseType, TimeMeta} from 'types';
import {get} from 'utils/request';
import dayjs from 'dayjs';
type DateSelect = {
  [key: string]: TimeMeta;
};
const dateArr: DateSelect = {
  anytime: {
    after: '',
    before: '',
  },
  today: {
    before: dayjs().valueOf(),
    after: dayjs().subtract(1, 'day').valueOf(),
  },
  tomorrow: {
    before: dayjs().add(1, 'day').valueOf(),
    after: dayjs().valueOf(),
  },
  thisweek: {
    before: dayjs().valueOf(),
    after: dayjs().subtract(7, 'day').valueOf(),
  },
};
let count = 1;
export default function FiltersContent(props: any) {
  const channels = useSelector(selectChannels) || [];
  const channel = useSelector(selectChannel) || [];
  const [selectedChannel, setSelectedhannel] = useState({});
  const [selectedDate, setSelectedDate] = useState<TimeRange>();
  const dispatch = useDispatch();
  const getChannels = async () => {
    const {data}: ResponseType = await get('/channels');
    dispatch(actions.setChannels(data.channels));
  };
  useEffect(() => {
    if (channels.length === 0) {
      getChannels();
    }
    if (channel) {
      setSelectedhannel(channel);
    }
  }, [channel]);
  console.log('筛选框渲染', count++);

  return (
    <>
      <DrawerContentScrollView {...props} style={styles.container}>
        <View>
          <View style={styles.titleContainer}>
            <Text style={styles.title}>{lang('dateTitle')}</Text>
          </View>
          <View style={styles.buttonContainer}>
            {Object.keys(dateArr).map((key, idx) => {
              return (
                <RnButton
                  style={styles.btn}
                  key={idx}
                  type={dateArr[key] === selectedDate ? 'primary' : 'default'}
                  onPress={() => setSelectedDate(dateArr[key])}>
                  {lang(key)}
                </RnButton>
              );
            })}
          </View>
        </View>
        <View style={{marginTop: 20}}>
          <View style={styles.titleContainer}>
            <Text style={styles.title}>{lang('channelTitle')}</Text>
          </View>
          <View style={styles.buttonContainer}>
            {channels.map((channel: Channel) => {
              return (
                <RnButton
                  key={channel.id}
                  style={styles.btn}
                  borderShow={true}
                  type={
                    channel.id === (selectedChannel as Channel).id
                      ? 'primary'
                      : 'default'
                  }
                  fontSize={12}
                  onPress={() => {
                    // 选中设置并触发搜索
                    setSelectedhannel(channel);
                  }}>
                  {channel.name}
                </RnButton>
              );
            })}
          </View>
        </View>
      </DrawerContentScrollView>
      <SearchButton
        {...props}
        onPress={() => {
          console.log('选中项', selectedDate);
          dispatch(actions.setSelectedDate(selectedDate));
          dispatch(actions.setSelectedChannel(selectedChannel as Channel));
        }}
      />
    </>
  );
}
const SearchButton = (props: any) => {
  const {navigation, onPress} = props;
  const search = () => {
    navigation.dispatch(DrawerActions.closeDrawer());
    // 跨组件通信使用redux
    onPress();
  };
  return (
    <TouchableOpacity style={styles.bottomContainer} onPress={search}>
      <View style={styles.searchBtnContainer}>
        <Image
          style={styles.metaIcon}
          source={require('assets/icons/search.png')}
        />
        <Text style={styles.metaText}>搜索</Text>
      </View>
      <Text style={styles.bottomText}>All activities</Text>
    </TouchableOpacity>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 10,
    paddingHorizontal: 15,
    backgroundColor: '#453257',
  },
  titleContainer: {
    marginBottom: 16,
    paddingBottom: 2,
    alignSelf: 'center',
    borderStyle: 'solid',
    borderBottomWidth: 1,
    borderBottomColor: '#AC8EC9',
  },
  title: {
    fontSize: 12,
    color: '#AC8EC9',
    textAlign: 'center',
  },

  buttonContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingRight: -15,
  },
  btn: {
    marginRight: 15,
    marginTop: 10,
  },
  //底部搜索按钮
  bottomContainer: {
    backgroundColor: '#D5EF7F',
    alignItems: 'center',
    paddingVertical: 15,
  },
  searchBtnContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  metaIcon: {
    width: 12,
    height: 12,
  },
  metaText: {
    fontSize: 12,
    paddingLeft: 6,
  },
  bottomText: {
    color: '#8560A9',
    fontSize: 10,
  },
});
